<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录页面</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('admin-assets/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin-assets/css/font-awesome.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin-assets/css/ionicons.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin-assets/css/AdminLTE.min.css') }}"/>
    <style>
        .checkbox input[type=checkbox] {
            position: relative;
            margin-left: 0;
        }

        input.form-control::-webkit-input-placeholder {
            color: white;
        }

        input.form-control:-moz-placeholder {
            color: white;
        }

        input.form-control::-moz-placeholder {
            color: white;
        }

        input.form-control:-ms-input-placeholder {
            color: white;
        }

        .login-box-body .form-control-feedback, .login-logo a {
            color: white;
        }

        input.form-control, .login-box-body {
            background: none;
            color: white;
        }

        .login-box {
            z-index: 999;
            position: relative;
            top: 15%;
            border: 1px solid #aaa;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .login-logo {
            margin: 25px 0 5px 0;
        }

        .login-page .help-block {
            color: red;
        }

        body {
            background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
            background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
            background-attachment: fixed;
            overflow: hidden;
        }

        @keyframes rotate {
            0% {
                transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
            }
            100% {
                transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
            }
        }

        .stars {
            transform: perspective(500px);
            transform-style: preserve-3d;
            position: absolute;
            bottom: 0;
            perspective-origin: 50% 100%;
            left: 50%;
            animation: rotate 90s infinite linear;
        }

        .star {
            width: 2px;
            height: 2px;
            background: #F7F7B6;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 0 0 -300px;
            transform: translate3d(0, 0, -300px);
            backface-visibility: hidden;
        }
    </style>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition">
<div class="stars"></div>
<div style="height: 100vh">
    <div class="login-box">
        <div class="login-logo">
            <a href="#">
                登录
            </a>
        </div>
        <div class="login-box-body">
            <p class="login-box-msg">{{ trans('admin.loginDesc') }}</p>
            <form action="{{ url('statistical/index/login') }}" method="post" id="login">
                {{ csrf_field() }}
                <div class="form-group has-feedback {{ (isset($errors) && $errors->has('username') || session()->has('username')) ? ' has-error' : '' }}">
                    <input type="text" name="username" value="{{ old('username') }}" class="form-control"
                           placeholder="账号">
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                    @if ((isset($errors) && $errors->has('username')) || session()->has('username'))
                        <span class="help-block">
                            {{ session()->has('username') ? session('username') : $errors->first('username') }}
                        </span>
                    @endif
                </div>
                <div class="form-group has-feedback">
                    <input type="password" name="password" class="form-control"
                           placeholder="{{ trans('admin.password') }}">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                @if(session()->get('admin.login.error'))
                    <div
                            class="form-group has-feedback {{ isset($errors) && $errors->has('captcha') ? ' has-error' : '' }}">
                        <div style="display: flex; margin-top: 10px">
                            <input type="text" name="captcha" class="form-control" placeholder="请输入验证码">
                            <img src="{{ captcha_src() }}"
                                 onclick="this.src='{{captcha_src()}}'+Math.random()"
                                 style="margin-left:10px"
                            />
                        </div>
                        @if (isset($errors) && $errors->has('captcha'))
                            <span class="help-block">
                            {{ $errors->first('captcha') }}
                        </span>
                        @endif
                    </div>
                @endif
                <div class="row">
                    <div class="col-xs-4 right">
                        <button type="submit" class="btn btn-info btn-block btn-flat">
                            {{ trans('admin.login') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="{{ asset('admin-assets/plugins/jQuery/jQuery-2.1.4.min.js') }}"></script>
<script src="{{ asset('admin-assets/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('admin-assets/plugins/jsencrypt/jsencrypt.min.js') }}"></script>
<script>
    $(function () {
        var stars = 900; /*星星的密集程度，数字越大越多*/
        var $stars = $(".stars");
        var r = 800; /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
        for (var i = 0; i < stars; i++) {
            var $star = $("<div/>").addClass("star");
            $stars.append($star);
        }

        $(".star").each(function () {
            var cur = $(this);
            var s = 0.2 + (Math.random() * 1);
            var curR = r + (Math.random() * 300);
            cur.css({
                transformOrigin: "0 0 " + curR + "px",
                transform: " translate3d(0,0,-" + curR + "px) rotateY(" + (Math.random() * 360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + s + "," + s + ")"
            })
        })
    });
</script>
</body>
</html>
